<template>
    <div class="tnxel-enum-type" :data-v-id="id" v-if="enumType">
        <span class="tnxel-enum-type-caption" :title="title">{{ enumType.caption }}</span>
        <span v-if="itemDisplay === 'text'">
            {{ showCaption ? '(' : '' }}
            <span class="tnxel-enum-item-text" v-for="item of enumType.items" :key="item.key">{{ item.caption }}</span>
            {{ showCaption ? ')' : '' }}
        </span>
    </div>
    <span v-else>...</span>
</template>

<script>

export default {
    name: 'TnxelEnumType',
    props: {
        name: {
            type: String,
            required: true,
        },
        subname: String,
        app: {
            type: String,
            default: () => window.tnx.componentDefaultApp,
        },
        showCaption: {
            type: Boolean,
            default: true,
        },
        itemDisplay: String, // 选项的显示方式：默认不显示，text-文本显示，popover-气泡显示，tags-标签集显示
    },
    data() {
        return {
            id: window.tnx.util.string.uuid32(),
            enumType: null,
            title: null,
        };
    },
    mounted() {
        window.tnx.app.rpc.resolveEnumType(this.name, this.subname, enumType => {
            this.enumType = enumType;
            this.$nextTick(() => {
                let container = document.querySelector('.tnxel-enum-type[data-v-id="' + this.id + '"]');
                let caption = container.querySelector('.tnxel-enum-type-caption');
                if (container.clientWidth < caption.offsetWidth) {
                    this.title = this.enumType.caption;
                }
            });
        }, {
            app: this.app,
        });
    },
}
</script>

<style>
.tnxel-enum-type {
    overflow: hidden;
    text-overflow: ellipsis;
}

.tnxel-enum-type .tnxel-enum-item-text:not(:first-child) {
    margin-left: 6px;
    padding-left: 6px;
    border-left: 1px solid var(--el-border-color);
}
</style>
